import {Suspense} from 'react' // 导入React库和Suspense组件
import { BrowserRouter,HashRouter,Route,Routes,Navigate } from 'react-router-dom' // 导入React Router相关组件
import routerList from './routerConfig' // 导入路由配置
import { RouterItem } from '../utills/type' // 导入路由项类型定义

// 该组件根据routerList配置渲染对应的路由
function RouterView() {
     // 解构获取路由模式和路由数组
    const {mode,routes}=routerList;

     //   递归渲染路由数组中的每个路由项
    const rendeRoutes=(arr:RouterItem[])=>{
        return arr && arr.map((item,index)=>{
            return <Route key={index} path={item.path} element={item.to?<Navigate to={item.to}></Navigate>:<item.element></item.element>}>
                {
                    // 如果有子路由，递归调用rendeRoutes
                    item.children && rendeRoutes(item.children) 
                }
            </Route>
        })
    }

  return (
    // 使用Suspense处理路由组件异步加载状态 白屏优化
    <Suspense fallback={<div>加载中.......</div>}>
        {
            // 根据模式选择渲染BrowserRouter或HashRouter
            mode==="history"?<BrowserRouter>
            <Routes>
                {
                    rendeRoutes(routes) // 根据路由配置渲染路由
                }
            </Routes>
            </BrowserRouter>:<HashRouter>
                  <Routes>
                {
                    rendeRoutes(routes) // 根据路由配置渲染路由
                }
            </Routes>
            </HashRouter>
        }
    </Suspense>
  )
}

export default RouterView // 导出路由视图组件